<template>
	<u-popup
		v-model="getFeedShow"
		mode="center"
		:mask-close-able="false"
		class="chicken-edit">
		<view class="box">
			<view class="text">
				<view class="text-title">欢迎加入万泉农场</view>
				<view class="text-center">
					<view>
						<image
							src="/static/images/chicken/dialog/feed.png"
							mode="widthFix"></image>
					</view>
					<view>送您饲料120g</view>
				</view>
				<view
					@click="rightGet"
					class="text-btn">立即领取</view>
			</view>
			
			<image
				class="bg"
				src="/static/images/chicken/dialog/feed_bg.png"
				mode="widthFix"></image>
			<image
				class="close"
				@click="changeShow"
				src="/static/images/chicken/close.png"
				mode="widthFix"></image>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: 'myFriend',
		props: {
			getFeedShow: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				
			}
		},
		mounted() {
			
		},
		methods: {
			changeShow() {
				this.$emit('changeShow', 'getFeedShow');
			},
			rightGet() {
				this.changeShow();
			},
		}
	}
</script>

<style lang="scss" scoped>
.chicken-edit {
	.box {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		background-color: transparent;
		.text {
			position: absolute;
			top: 130rpx;
			left: 0;
			z-index: 11;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			.text-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #732011;
			}
			.text-center {
				display: flex;
				flex-direction: column;
				justify-content: center;
				text-align: center;
				> view {
					image {
						width: 240rpx;
						margin-top: 90rpx;
					}
				}
				> view:last-of-type {
					margin-top: 26rpx;
					color: #FF7F01;
				}
			}
			.text-btn {
				width: 405rpx;
				height: 103rpx;
				margin-top: 40rpx;
				background: url('/static/images/chicken/dialog/feed_btn.png') no-repeat center center;
				background-size: 100%;
				font-size: 32rpx;
				line-height: 96rpx;
				color: #fff;
				text-align: center;
			}
		}
		
		.bg {
			width: 586rpx;
		}
		
		.close {
			position: absolute;
			right: 36rpx;
			top: 160rpx;
			z-index: 11;
			width: 46rpx;
		}
	}
}
</style>